<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.mingb{width: 500px;height: 500px;background-color: red;}
		.xiaoming{width: 300px;height: 300px;background-color: green;}
	</style>
</head>
<body>
	<div class="mingb">
		<div class="xiaoming"></div>
	</div>
</body>
<script type="text/javascript">
	// 事件捕获
	// 事件冒泡
	var mingb = document.getElementsByClassName("mingb")[0];
	var xiaoming = document.getElementsByClassName("xiaoming")[0];
	// 点击事件→小明谈恋爱被发现 
	// onclick函数，事发后的处理
	// 事件处理的顺序 子→父（事件冒泡）
	// 阻止事件冒泡
	xiaoming.onclick = function(ev){
		console.log("小明检讨：以后再也不敢了，XXXX");
		// 取消冒泡：事件不会在传递给父级（小明自己处理这个事情，不让他爸插手了。）
		// 第一种
		// ev.cancelBubble = true;
		// 第二种
		ev.stopPropagation();
	}
	mingb.onclick = function(ev){
		console.log("明爸：还想有以后？暴打一顿");
	}
	// 事件绑定
	xiaoming.addEventListener("click", function(){
		console.log("小明的事件绑定");
	},false);
	xiaoming.addEventListener("click", fn, false);
	function fn(){
		console.log("函数 fn");
	}
	// 移除事件。移除的时候要写函数名，true和false 也要统一
	xiaoming.removeEventListener("click", fn, false);
	// IE的事件绑定和解除
	// 绑定
	// xiaoming.attachEvent("onclick", fn);
	// 移除
	// xiaoming.detachEvent("onclick", fn);
	// 封装一个函数，解决兼容问题
	function bd(el, type,fn){
		if (el.attachEvent) {
			el.attachEvent("on"+type, fn, false);
		} else if (el.addEventListener) {
			el.addEventListener(type, fn, fa lse);
		} else { 
			el["on"+type]=fn; 
		} 
	}
	bd(mingb,"click",function(){
		console.log("明爸被绑了");
	});
	// 点击小明之后-> 明爸捕获-> 小明捕获-> 小明冒泡-> 明爸冒泡
	// 绑定事件的第三个参数为true代表在捕获阶段执行事件，false代表在冒泡阶段执行函数。
	xiaoming.addEventListener("click",function(){
		console.log("小明开始忏悔:X");
	},true);
	mingb.addEventListener("click",function(){
		console.log("暴打一顿");
	},true);
</script>
</html>